<template>
    <div>
        <div class="flex">
            <!-- 年份下拉列表 -->
      <el-select v-model="selectedYear" placeholder="选择年份" @change="updateChart" style="margin-bottom: 10px; max-width: 100px" >
        <el-option v-for="year in years" :key="year" :label="year" :value="year" />
      </el-select>
  
      <!-- 专业偏好下拉列表 -->
      <el-select v-model="selectedType" placeholder="专业偏好" @change="updateChart" style="margin-bottom: 10px; max-width: 100px;">
        <el-option label="省份" value="province" />
        <el-option label="本校专业" value="major" />
      </el-select>
      
        </div>
      
  
      <!-- 图表容器 -->
      <div ref="chartRef" style="width: 800px; height: 400px;"></div>
    </div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts';
  import { ref, onMounted, watch } from 'vue';
  import { ElSelect, ElOption } from 'element-plus';
  
  // 初始化年份和下拉列表选项
  const years = ['2021', '2022', '2023', '2024'];
  const selectedYear = ref('2021');
  const selectedType = ref('province');
  const chartRef = ref(null);
  
  // 模拟数据
  const data = {
    province: [
      { name: '总体', male: 1000, female: 800 },
      { name: '北京', male: 300, female: 250 },
      { name: '上海', male: 280, female: 230 },
      { name: '上海', male: 280, female: 230 },
      { name: '上海', male: 280, female: 230 },
      { name: '上海', male: 280, female: 230 },
      { name: '上海', male: 280, female: 2000 },
      { name: '上海', male: 280, female: 230 },
      // 添加所有省份
    ],
    major: [
      { name: '计算机科学', male: 500, female: 400 },
      { name: '软件工程', male: 450, female: 350 },
      { name: '机械工程', male: 300, female: 150 },
      { name: '机械工程', male: 300, female: 150 },
      { name: '机械工程', male: 300, female: 150 },
      { name: '机械工程', male: 300, female: 150 },
      { name: '机械工程', male: 300, female: 150 },
      { name: '机械工程', male: 300, female: 150 },
      { name: '机械工程', male: 300, female: 150 },
      { name: '机械工程', male: 300, female: 150 },
      // 添加其他专业
    ]
  };
  
  // 初始化图表
  const initChart = () => {
    const myChart = echarts.init(chartRef.value);
    const option = getChartOption(data[selectedType.value]);
    myChart.setOption(option);
  };
  
  // 获取图表配置项
  const getChartOption = (chartData) => {
    // 按人数降序排序
    chartData = chartData.sort((a, b) => b.male + b.female - (a.male + a.female));
  
    return {
        title: {
      text: '学生专业/省份分布'
    },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
      },
      legend: { data: ['男生', '女生'] },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'category',
        data: chartData.map((item) => item.name)
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '男生',
          type: 'bar',
          stack: 'total',
          emphasis: { focus: 'series' },
          itemStyle: { color: '#3398DB' }, // 蓝色柱子
          data: chartData.map((item) => item.male)
        },
        {
          name: '女生',
          type: 'bar',
          stack: 'total',
          emphasis: { focus: 'series' },
          itemStyle: { color: '#FF69B4' }, // 粉色柱子
          data: chartData.map((item) => item.female)
        }
      ]
    };
  };
  
  // 更新图表数据
  const updateChart = () => {
    const myChart = echarts.init(chartRef.value);
    const option = getChartOption(data[selectedType.value]);
    myChart.setOption(option);
  };
  
  // 组件挂载时初始化图表
  onMounted(() => {
    initChart();
  });
  
  // 监听数据变化
  watch([selectedYear, selectedType], updateChart);
  </script>
  
  <style scoped>
  /* 添加一些简单的样式 */
  .el-select {
    margin-right: 10px;
  }
  </style>
  